<template>
	<view class="page-content">
		<cu-custom dataHeight="100" :isBack="true" style="width: 100%;" :isFixed="true">
			<block slot="content">
				<text class="text-xl">技能模拟</text>
			</block>
		</cu-custom>
		<!-- 头信息 -->
		<view class="head1">
			<image class="bg-set1" :src="bgimage"></image>
			<view class="meng1"></view>
		</view>
		<!-- 小图窗信息 -->
		<view class="info">
			<navigator url="/pages/index/peizhuang/index?type=4">
				<view class="info-left">
					<image class="head-image" :src="icon_wuxing" mode="aspectFit"></image>
				</view>
			</navigator>
			<view class="info-right padding-left-sm">
				<view class="title">
					{{ name }}
				</view>
				<view class="info-detail">
					{{ info }}
				</view>
			</view>
		</view>

		<view class="items">
			<view class="item" v-for="(item, index) in pic" :key="index">
				<view class="img-wrap">
					<!-- 技能图片 -->
					<image :src="item.imgUrl" class="item-image" @click="handleShowInfo(index)"></image>
				</view>
				<!-- 点击＋图片 -->
				<view class="item-add">
					<text class="item-text">{{ item.values }}</text>
					<image src="../../../static/home/jineng/jineng-add.png" class="add-img" @click="addJi(index)"></image>
				</view>
			</view>
		</view>

		<!-- 技能分配点 -->
		<view class="num">
			<view class="num-right">
				<text>已用技能点 {{all}}</text>
			</view>
		</view>

		<view class="bottom">
			<view class="bottom-left">
				<view class="reset-btn btn" :class="all > 0 ? 'text-white' : 'text-grey'" @click="resetAll" v-if="from === null">重置潜能</view>
			</view>
			<view class="bottom-right">
				<view class="save-btn btn" :class="all > 0 ? 'text-white' : 'text-grey'" @click="showModal = true" v-if="from === null">保存分配</view>
			</view>
		</view>

		<view class="cu-modal show" v-if="showModal">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">保存技能</view>
					<view class="action" @click="showModal = false">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="solid-top">
					<view class="cu-form-group">
						<view class="title">标题<text class="text-red">*</text></view>
						<input type="text" value="" v-model="title" class="text-left" />
					</view>
					<textarea value="" v-model="description" placeholder="请输入配点方案的简介或描述" class="text-left padding" />
				</view>
				<view class="cu-bar bg-white justify-end">
					<view class="action">
						<button class="cu-btn bg-gradual-blue-plus margin-left" @click="handleSave">保存</button>
					</view>
				</view>
			</view>
		</view>

		<view class="cu-modal show" v-if="skillTips">
			<view class="cu-dialog skill-dialog bg-transparent solid line-yellow-extend">
				<view class="cu-bar justify-end">
					<view class="action" @click="skillTips = null">
						<text class="cuIcon-close text-yellow-extend"></text>
					</view>
				</view>
				<view class="padding-bottom padding-lr flex flex-direction">
					<text v-if="skillTips.sConcat1">{{ skillTips.sConcat1 }}</text>
					<text class="margin-tb-sm text-white" v-if="skillTips.sConcat2">{{ skillTips.sConcat2 }}</text>
					<view class="margin-tb-sm">
						<text class="margin-right-xs text-white">武功流派:</text>
						<text class="text-green-extend" v-if="skillTips.sConcat3">{{ skillTips.sConcat3 }}</text>
					</view>
					<text class="text-white" v-if="skillTips.sConcat4">{{ skillTips.sConcat4 }}</text>
					<text class="text-white" v-if="skillTips.sConcat5">{{ skillTips.sConcat5 }}</text>
					<text class="text-white" v-if="skillTips.sConcat6">{{ skillTips.sConcat6 }}</text>
					<text class="text-white" v-if="skillTips.sConcat7">{{ skillTips.sConcat7 }}</text>
					<text class="margin-tb-sm text-red" v-if="skillTips.sConcat8">{{ skillTips.sConcat8 }}</text>
					<text class="text-red" v-if="skillTips.sConcat9">{{ skillTips.sConcat9 }}</text>
					<text class="text-red" v-if="skillTips.sConcat10">{{ skillTips.sConcat10 }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	// 注册自定义导航组件
	import cuCustom from '@/libs/colorui/components/cu-custom.vue';

	// 引入封装的网络请求
	import { handleRequest } from '@/common/request.js';

	import {
		userOptions as userOptionsApi
	} from '@/api/user/userOptions.js';

	import groups from '@/utils/init/groups.js';

	export default {
		components: {
			cuCustom
		},
		data() {
			return {
				skillTips: null,
				showModal: false,
				title: '',
				description: '',
				icon_wuxing: "",
				src: "https://jianxia.mazhoudao.com/h5/static/home/peizhuang/select.png",
				bgimage: "https://jianxia.mazhoudao.com/h5/static/home/menpai/emei.png",
				all: 0,
				allB: 0,
				options: {}, //属性对象
				initValue: 0, //默认技能点
				skilltype: 0, //默认
				resetcolor: "color:#728C98",
				// 上一页传过来得信息
				pageInfo: {},
				level: 0,
				pic: [],

				// 门派
				mainId: 0,

				// 门派分支
				branchId: 1,
				
				// 类型
				nType: 3,
				
				// 数据
				nIndex: 0,
				
				// 来路，用来控制加点方案是否可以编辑
				from: null,
			}
		},
		onLoad(options) {
			if (options.mainId) this.mainId = options.mainId
			if (options.branchId) this.branchId = options.branchId
			if (options.from) this.from = options.from
			
			this.nUid = uni.getStorageSync('uid');
			this.nIndex = options.nIndex;
			
			console.log(this.nUid, this.nIndex)

			if (this.nIndex == undefined) {
				this.choose_type = options.choose_type;
				this.selectTypeIndex = options.selectTypeIndex;
			} else {
				this.handleInitProps();
			}

			this.rolelist = this.$Global.JobType;
			this.icon_wuxing = this.$Global.WuXing_Res[this.rolelist[this.choose_type].WX_type].res;
			this.bgimage = options.name ? "https://jianxia.mazhoudao.com/h5/static/home/menpai/" + options.name + ".png" : "https://jianxia.mazhoudao.com/h5/static/home/menpai/emei.png";
			this.pageInfo = options;

			if (options.name === undefined && this.nIndex) {
				options.name = groups[this.mainId].name_en;
				options.selectTypeIndex = this.selectTypeIndex - 1;
			}

			if (options.name === 'tianwang') {
				// this.name='天王'	
				if (options.selectTypeIndex == 0) {
					this.name = '天王·锤天王'
					this.type = "chui"
					this.num = 9
				}

				if (options.selectTypeIndex == 1) {
					this.name = '天王·刀天王'
					this.type = "dao"
					this.num = 9
				}
				if (options.selectTypeIndex == 2) {
					this.name = '天王·枪天王'
					this.type = "qiang"
					this.num = 9
				}
			}
			if (options.name === 'shaolin') {

				if (options.selectTypeIndex == 0) {
					this.name = '少林·刀少林'
					this.type = "dao"
					this.num = 9
				}
				if (options.selectTypeIndex == 1) {
					this.name = '少林·棍少林'
					this.type = "gun"
					this.num = 9
				}
				if (options.selectTypeIndex == 2) {
					this.name = '少林·拳少林'
					this.type = "quan"
					this.num = 9
				}
			}
			if (options.name === 'tangmen') {

				if (options.selectTypeIndex == 0) {
					this.name = '唐门·飞镖唐门'
					this.type = "feibiao"
					this.num = 6
				}
				if (options.selectTypeIndex == 1) {
					this.name = '唐门·飞刀唐门'
					this.type = "feidao"
					this.num = 7
				}
				if (options.selectTypeIndex == 2) {
					this.name = '唐门·袖箭唐门'
					this.type = "nujian"
					this.num = 7
				}
				if (options.selectTypeIndex == 3) {
					this.name = '唐门·陷阱唐门'
					this.type = "xianjing"
					this.num = 6
				}
			}
			if (options.name === 'wudu') {

				if (options.selectTypeIndex == 0) {
					this.name = '五毒·刀五毒'
					this.type = "dao"
					this.num = 10
				}
				if (options.selectTypeIndex == 1) {
					this.name = '五毒·掌五毒'
					this.type = "zhang"
					this.num = 10
				}
				if (options.selectTypeIndex == 2) {
					this.name = '五毒·诅咒五毒'
					this.type = "zuzhou"
					this.num = 9
				}



			}
			if (options.name === 'emei') {
				if (options.selectTypeIndex == 0) {
					this.name = '峨眉·剑峨眉'
					this.type = "jian"
					this.num = 6
				}
				if (options.selectTypeIndex == 1) {
					this.name = '峨眉·气峨眉'
					this.type = "qi"
					this.num = 7
				}
				if (options.selectTypeIndex == 2) {
					this.name = '峨眉·辅助峨眉'
					this.type = "fuzhu"
					this.num = 6
				}


			}
			if (options.name === 'cuiyan') {
				if (options.selectTypeIndex == 0) {
					this.name = '翠烟·单刀翠烟'
					this.type = "dandao"
					this.num = 7
				}
				if (options.selectTypeIndex == 1) {
					this.name = '翠烟·双刀翠烟'
					this.type = "shuangdao"
					this.num = 5
				}

			}
			if (options.name === 'gaibang') {
				if (options.selectTypeIndex == 0) {
					this.name = '丐帮·棍丐帮'
					this.type = "gun"
					this.num = 10
				}
				if (options.selectTypeIndex == 1) {
					this.name = '丐帮·掌丐帮'
					this.type = "zhang"
					this.num = 10
				}
			}
			if (options.name === 'tianren') {
				if (options.selectTypeIndex == 0) {
					this.name = '天忍·刀天忍'
					this.type = "dao"
					this.num = 6
				}
				if (options.selectTypeIndex == 1) {
					this.name = '天忍·矛天忍'
					this.type = "mao"
					this.num = 6
				}
				if (options.selectTypeIndex == 2) {
					this.name = '天忍·诅咒天忍'
					this.type = "zhuzou"
					this.num = 6
				}
			}
			if (options.name === 'wudang') {
				if (options.selectTypeIndex == 0) {
					this.name = '武当·剑武当'
					this.type = "jian"
					this.num = 6
				}
				if (options.selectTypeIndex == 1) {
					this.name = '武当·气武当'
					this.type = "qi"
					this.num = 6
				}
			}
			if (options.name === 'kunlun') {
				if (options.selectTypeIndex == 0) {
					this.name = '昆仑·刀昆仑'
					this.type = "dao"
					this.num = 10
				}
				if (options.selectTypeIndex == 1) {
					this.name = '昆仑·剑昆仑'
					this.type = "jian"
					this.num = 10
				}
				if (options.selectTypeIndex == 2) {
					this.name = '昆仑·诅咒昆仑'
					this.type = "zuzou"
					this.num = 9
				}
			}

			for (let i = 1; i <= this.num; i++) {
				this.pic[i - 1] = {
					imgUrl: require('../../../static/jineng/' + options.name + '/' + this.type + '/' + i + '.jpg'),
					values: 0,
					skilltype: 0,
					skillName: this.skillArray[i]
				}
			}

			if (this.nIndex > 0) {
				this.handleLoadData();
			}

			// this.pic[0].skilltype = 1
			// // 如果从服务器拿到数据
			// // jiadian
			// // 遍历整个jiadian 这个表
			// this.pic[key].value = jiadian[key]
		},
		computed: {
			skillArray: {
				get() {
					let branchSkills = groups[this.mainId]['list'][this.branchId].skills;
					let mainSkills = groups[this.mainId].skills;

					Object.values(mainSkills).map(skill => {
						let k = Object.keys(branchSkills).length + 1;

						branchSkills[k] = skill;
					})

					return branchSkills;
				}
			},
			currentElement: {
				get() {
					if (this.nIndex > 0) {
						let dataFromStorage = uni.getStorageSync(`nIndex:${this.nType}:${this.nIndex}`);
						const name = dataFromStorage.sMemPai.split('·')[0];

						return this.handleGetCurrentElementByName(name);
					} else {
						return groups[this.mainId].element;
					}
				}
			},
			name: {
				get() {
					if (this.nIndex > 0) {
						let dataFromStorage = uni.getStorageSync(`nIndex:${this.nType}:${this.nIndex}`);

						return dataFromStorage.sMemPai || '天王·刀天王';
					} else {
						return this.mainId !== undefined ? groups[this.mainId]['list'][this.branchId].full_name : '天王·刀天王';
					}
				},
				set(newVal) {

				}
			},
			info: {
				get() {
					if (this.nIndex > 0) {
						let info = '';
						groups.some(item => {
							return item.list.some((item) => {
								if (item.full_name === this.name) {
									info = item.desc;
									return item.full_name === this.name;
								}
							})
						})

						return info;
					} else {
						return this.mainId !== undefined ? groups[this.mainId]['list'][this.branchId].desc : '活动期间，玩家可以通过礼包发放地址领取激活码。开服后大侠可在各大主城，新手村npc“龙儿”处输入激活码，即可兑换单思南新手礼包（自兑换起时限7天），开启礼。';
					}
				},
				set(newVal) {
					
				}
			}
		},
		watch: {
			pic: {
				handler(newVal, oldVal) {},
				immediate: true,
				deep: true
			}
		},
		methods: {
			// 从数据库加载配置
			handleLoadData() {
				const dataFromStorage = uni.getStorageSync(`nIndex:${this.nType}:${this.nIndex}`);

				if (dataFromStorage) {
					if (typeof dataFromStorage.sProgramme === 'string') {
						dataFromStorage.sProgramme = JSON.parse(dataFromStorage.sProgramme);
					}
			
					if (dataFromStorage.sProgramme.lists.length > 0) {
						this.pic = dataFromStorage.sProgramme.lists.map(item => {
							if (item.values > 0) {
								this.all += item.values
							}
			
							return item;
						})
					}
				} else {
					// 找不到数据就直接初始化
					this.nIndex = 0;
				}
			},
			handleGetCurrentElementByName(name) {
				let item = {}

				groups.some(res => {
					if (res.name === name) {
						return item = res;
					}
				});

				return item.element;
			},
			handleInitProps() {
				let dataFromStorage = uni.getStorageSync(`nIndex:${this.nType}:${this.nIndex}`);
				let fullName = dataFromStorage.sMemPai;
				let name = fullName.split('·')[0];

				groups.some(res => {
					if (res.name === name) {
						// 赋值给门派
						this.mainId = this.choose_type = res.id;
						res.list.some(r => {
							if (r.full_name === fullName) {
								// 赋值给门派分支
								this.branchId = this.selectTypeIndex = r.id;
							}
						})
						return;
					}
				})
			},

			async handleShowInfo(index) {
				let item = this.pic[index];
				let params = {
					cmd: 'skill_info',
					sSkillName: item.skillName,
					nLv: item.values
				};

				await handleRequest(params).then(res => {
					if (Object.keys(res[0]).length > 0) {
						this.skillTips = res[0]
					}
				})
			},
			// 保存
			async handleSave() {
				if (this.title == '') {
					uni.showToast({
						icon: 'error',
						title: '参数不正确',
					})
					return;
				}

				let params = {
					cmd: 'savebytype',
					nType: this.nType,
					nIndex: 0,
					sTitle: this.title,
					sDescribe: this.description,
					nUid: uni.getStorageSync('uid'),
					sMemPai: this.name,
					sProgramme: JSON.stringify({
						lists: this.pic
					})
				};

				await handleRequest(params, false, true).then(res => {
					let msg = res.messageList[0].message;

					if (res.responseCode === '100') {
						uni.showToast({
							title: msg || '保存成功',
							success: () => {
								this.showModal = false;
							}
						});
					} else {
						uni.showToast({
							icon: 'error',
							title: msg || '保存失败',
							success: () => {}
						});
					}
				})
			},
			addJi(index) {
				// 目前20封顶
				if (this.pic[index].values === 20) return
				
				this.pic[index].values += 1;
				this.all += 1;
				
				// 更新
				this.pic = this.pic.filter(item => {
					return item;
				})
			},
			resetAll() {
				this.all = 0;

				// 更新
				this.pic = this.pic.filter(item => {
					item.values = 0;
					return item;
				})
			}
		}
	}
</script>

<style scoped>
	.skill-dialog {
		border-radius: 0;
		background-color: rgba(0, 0, 0, .5);
	}
	.skill-dialog .cu-bar {
		min-height: 60rpx;
	}
	.skill-dialog > .cu-bar:first-child .action {
		min-height: 60rpx;
		min-width: 60rpx;
	}
	.skill-dialog .cu-bar .action:first-child > text[class*="cuIcon-"] {
		margin: 0;
	}
	.flex-item {
		width: 33.3%;
		height: 200rpx;
		text-align: center;
		line-height: 200rpx;
	}

	.flex-item-V {
		width: 100%;
		height: 150rpx;
		text-align: center;
		line-height: 150rpx;
	}

	.text {
		margin: 15rpx 10rpx;
		padding: 0 20rpx;
		background-color: #ebebeb;
		height: 70rpx;
		line-height: 70rpx;
		text-align: center;
		color: #777;
		font-size: 26rpx;
	}

	page {
		background-color: #1F282C;
	}

	.page-content {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-bottom: 60rpx;
		background-color: #1F282C;
		min-height: 100vh;
	}

	.bottom {
		width: 100%;
	}

	.bg-set {
		position: fixed;
		width: 100%;
		height: 326rpx;
		top: 0;
		left: 0;
		z-index: -1;
	}

	.head {
		display: flex;
		float: left;
		/* z-index: 10000; */
		width: 100%;
		height: 326rpx;
		background-color: #1F282C;
	}

	.meng {
		position: fixed;
		margin-top: 68rpx;
		width: 750rpx;
		height: 173rpx;
		background: linear-gradient(0deg, rgba(78, 100, 110, 0.8), rgba(78, 100, 110, 0.01));
	}

	.head1 {
		float: left;
		z-index: 2;
		width: 100%;
		height: 326rpx;
		margin-top: -182rpx;
		background-color: #1F282C;
	}

	.bg-set1 {
		/* position: fixed; */
		width: 100%;
		height: 326rpx;
		top: 0;
		left: 0;
		z-index: -1;
	}

	.meng1 {
		margin-top: -180rpx;
		width: 750rpx;
		height: 176rpx;
		background: linear-gradient(0deg, rgba(78, 100, 110, 0.8), rgba(78, 100, 110, 0.01));
	}

	.info {
		display: flex;
		float: left;
		z-index: 10001;
		width: 92%;
		height: 200rpx;
		margin-top: -100rpx;
		background-color: #405C69;
		border-radius: 10px;
	}

	.head-image {
		height: 76rpx;
		width: 50rpx;
		border-top-left-radius: 20rpx;
	}

	.info .info-left {
		height: 100%;
	}

	.info .info-right {
		overflow: hidden;
		padding-bottom: 20rpx;
		padding-right: 20rpx;
	}

	.info .info-right .title {
		margin-top: 16rpx;
		color: #FFFFFF;
		font-size: 30rpx;
		font-weight: 400;
	}

	.info .info-right .info-detail {
		margin-top: 16rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
		color: #A0AAAF;
		font-size: 24rpx;
		line-break: 3;

	}

	.items {
		/* background-color: #1F282C; */
		display: flex;
		width: 96%;
		flex-wrap: wrap;
		padding-top: 10rpx;
		padding-bottom: 50rpx;
	}

	.item {
		margin-top: 20rpx;
		width: 20%;
		height: 172rpx;
	}

	.img-wrap {
		margin: 0 auto;
		width: 124rpx;
		height: 124rpx;
		border: 2rpx solid #897F62;
	}

	.item-image {
		width: 100%;
		height: 100%;

	}

	.item-add {
		margin: 0 auto;
		width: 124rpx;
		height: 52rpx;
		border: 2rpx solid #897F62;
		line-height: 52rpx;
	}

	.item-text {
		margin-left: 10rpx;
		width: 100%;
		height: 100%;
		line-height: 52rpx;
		color: #FFFFFF;
	}

	.add-img {
		float: right;
		margin-top: 5rpx;
		margin-right: 5rpx;
		width: 44rpx;
		height: 44rpx;
	}

	.num {
		width: 90%;
		text-align: center;
		color: #728C98;
		font-size: 20rpx;
		margin-right: 25rpx;
		margin-top: 64rpx;
		padding-bottom: 30rpx;
		border-bottom: solid 1px #405C69
	}

	.num-left {
		float: left;
		width: 50%;
		height: 100%;
	}

	.num-right {
		float: right;
		width: 50%;
		height: 100%;
		text-align: right;
	}

	.num-left-text {
		margin-left: 20rpx;
		float: left;
		line-height: 40rpx;
	}

	.level-input {
		width: 87rpx;
		height: 40rpx;
		background: #405C69;
		border-radius: 4rpx;
		text-indent: 0rpx;
		font-size: 20rpx;
		color: #FFFFFF;
	}

	.input-placeholder {
		color: #FFFFFF;
	}

	.bottom {
		margin-top: 100rpx;
		width: 100%;
		display: flex;
	}

	.bottom-left {
		width: 50%;
		/* background-color: #0000FF; */

	}

	.bottom-right {
		/* background-color: #008000; */
		width: 50%;
	}

	.btn {
		text-align: center;
		width: 220rpx;
		height: 70rpx;
		border: 2rpx solid #728C98;
		border-radius: 35rpx;
		line-height: 70rpx;
	}

	.reset-btn {
		float: right;
		margin-right: 30rpx;
		font-size: 30rpx;
		font-weight: 400;
	}

	.save-btn {
		float: left;
		margin-left: 30rpx;
		font-size: 30rpx;
		font-weight: 400;
	}

	.cu-modal {
		z-index: 10002;
	}

	.cu-modal .cu-dialog {
		width: 80%;
	}

	.cu-bar .content {
		background-color: #ffffff;
		display: initial;
		color: #1cbbb4;
	}

	.back-pre {
		position: absolute;
		width: 74rpx;
		height: 74rpx;
		top: 100rpx;
		left: 20rpx;
	}
</style>
